{% load custom_filters %}
<html>
<head>
    <link rel="stylesheet" href="static/css/bootstrap.css">
    <link rel="stylesheet" href="static/css/bootstrap.min.css">
    <link rel="stylesheet" href="static/css/offline.css">
    <title>
        {% block pagetitle %} {{course.name}} {% endblock %}
    </title>
</head>
<body>
<nav class="navbar bg-dark navbar-dark">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="../../index.html">
                <img src="static/images/yaksh_banner.png" alt="YAKSH">
                </img>
            </a>
        </div>
    </div>
</nav>
<div class="container" style="margin-top:50px">
    <h1>
        <center>
            {% block subtitle %}
                {{course.name}}
            {% endblock %}
        </center>
    </h1>
    <div class="row justify-content-md-center">
        <div class="col-md-10">
            {% block content %}
                {% for module in modules %}
                    <section class="bg-grey text-center">
                        <div class="row">
                            <div class="col">
                                {{module.name}}
                            </div>
                            <div class="col">
                                <button class="btn btn-info" data-toggle="collapse" data-target="#{{module.id}}">
                                    View Lessons
                                </button>
                            </div>
                            <div class="col">
                                <a href="{{module.name|replace_spaces}}/{{module.name|replace_spaces}}.html" target="_blank" class="btn btn-primary">Go to Module</a>
                            </div>
                        </div>
                    </section>
                    <br>
                    <div id="{{module.id}}" class="collapse">
                        <ul class="list-group">
                            {% for lesson in module.get_lesson_units %}
                                <li class="list-group-item">{{lesson.name}}</li>
                            {% endfor %}
                        </ul>
                    </div>
                    <br>
                {% endfor %}
            {% endblock %}
        </div>
    </div>
</div>
<footer class="footer" id="footer_div">
    <div class="container">
        <p align="center">Developed by FOSSEE group, IIT Bombay</p>
    </div>
</footer>
</body>
<script src="static/js/jquery-3.3.1.min.js"></script>
<script src="static/js/bootstrap.min.js"></script>
</html>